<template>
  <div class="app-container">
    <div class="search-bar">
      <span style="width: 70px">书名</span>
      <el-input v-model="searchBook" placeholder="请输入关键词" />
      <el-button
        style="margin-left: 10px"
        type="primary"
        @click="searchByBookName"
      ><i class="el-icon-search" />搜索</el-button>
      <el-button
        type="success"
      ><i
        class="el-icon-refresh"
        @click="freshTable"
      /></el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="120">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="书名" width="150">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="作者" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>

      <el-table-column label="封面" width="100" align="center">
        <template slot-scope="scope">
          <el-image :src="scope.row.imageUrl" />
        </template>
      </el-table-column>
      <el-table-column label="简介" width="350" align="center">
        <template slot-scope="scope">
          {{ scope.row.info }}
        </template>
      </el-table-column>
      <el-table-column label="出版时间" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.publishTime }}
        </template>
      </el-table-column>
      <el-table-column label="价格" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="分类"
        width="130"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{
            scope.row.type
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="score" label="评分">
        <template slot-scope="scope">
          <i class="el-icon-star-off" />
          <span>{{ scope.row.score }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            size="medium"
            type="primary"
            @click="handleUpdate(scope.$index, scope.row)"
          >更新</el-button>
          <el-button
            size="medium"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page="pagination.currentPage"
        :page-sizes="[10, 25, 20, 25]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 更新dialog -->
    <div class="updateDialog">
      <el-dialog title="书籍信息" :visible.sync="showDialog" width="40%">
        <div>
          <el-form ref="form" :model="form" label-width="120px" width="200px">
            <el-form-item label="名称">
              <el-input v-model="form.name" placeholder="请输入书籍名称" />
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="form.price" placeholder="请输入书籍价格" />
            </el-form-item>
            <el-form-item label="封面">
              <el-input v-model="form.imageUrl" placeholder="请上传书籍封面" />
            </el-form-item>
            <el-form-item label="作者">
              <el-input v-model="form.author" placeholder="请输入作者" />
            </el-form-item>
            <el-form-item label="分类">
              <el-select v-model="form.type" placeholder="请选择书籍分类">
                <template v-for="type in typeList">
                  <el-option
                    :key="type.id"
                    :label="type.name"
                    :value="type.name"
                  />
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="出版时间">
              <el-date-picker
                v-model="form.publishTime"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="书籍简介">
              <el-input
                v-model="form.info"
                type="textarea"
                placeholder="请输入书籍简介"
              />
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary" @click="updateBookInfo">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getList, deleteBook, updateBook } from '@/api/table'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      searchBook: '',
      pagination: {
        currentPage: 1,
        pageSize: 10
      },
      // 书籍信息
      bookInfo: {},
      // dialog是否弹出
      showDialog: false,
      form: {
        name: '',
        price: '',
        imageUrl: '',
        type: '',
        info: '',
        author: '',
        publishTime: ''
      },
      typeList: []
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    // 获取表单数据
    getTableData() {
      this.listLoading = true
      getList(
        this.searchBook,
        this.pagination.currentPage,
        this.pagination.pageSize
      ).then((response) => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
        console.log('bookdata')
        console.log(this.list)
      })
    },
    // 根据书名搜索
    searchByBookName() {
      this.pagination.currentPage = 1
      this.pagination.pageSize = 10
      this.getTableData()
    },
    // 刷新页面
    freshTable() {
      this.pagination.currentPage = 1
      this.pagination.pageSize = 10
      this.getTableData()
    },
    // 分页变化
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.getTableData()
    },

    // 每页数量发生变化
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.getTableData()
    },
    // 删除操作
    handleDelete(i, bookInfo) {
      console.log(bookInfo)
      this.$confirm('确认删除该图书嘛?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(() => {
        console.log('删除书籍id:' + bookInfo.id)
        deleteBook(bookInfo.id)
          .then(() => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          })
          .catch((err) => {
            this.$message({
              type: 'error',
              message: '删除失败' + err
            })
          })
        setTimeout(() => {
          this.searchBook = ''
          this.getTableData()
          this.showDialog = false
        }, 700)
      })
    },
    // 更新按钮
    handleUpdate(i, bookInfo) {
      this.form = bookInfo
      this.showDialog = true
    },
    // 关闭对话框
    close() {
      this.showDialog = false
    },
    updateBookInfo() {
      updateBook(this.form.id, this.form).then((response) => {
        this.$message({
          type: 'success',
          message: '更新成功'
        })
      }).catch((err) => {
        this.$message({
          type: 'error',
          message: '更新失败' + err
        })
      })
      setTimeout(() => {
        this.getTableData()
        this.showDialog = false
      }, 700)
    }
  }
}
</script>

<style lang="scss" scoped>
.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 5px;
}
.pagination {
  padding-top: 5px;
  display: flex;
  justify-content: right;
}
</style>
